<template>
  <el-dialog v-model="show" :width="width" :modal="modal" center>
    <template #header="{ close, titleId, titleClass }">
      <div :style="headCss">{{ title }}</div>
    </template>
    <div class="dialog-content">
      <slot></slot>

    </div>
    <template #footer>
      <span class="dialog-footer">
        <cusButton @click="show = false" v-if="showCancle">取消</cusButton>
        <cusButton @click="confrim" color="#0052D9" v-if="showConfrim">{{ confrimText }}</cusButton>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref } from "vue";
const show = ref(false);
import { useThrottleFn } from "@vueuse/core";
/**
 * @param title     标题内容
 * @param width     总体宽度
 * @param modal     是否显示遮罩层
 * @param showCancle    是否实现取消按钮
 * @param showConfrim   是否显示确认按钮
 * @param headCss       标题样式
 */
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  width: {
    type: String,
    default: "30%",
  },
  modal: {
    type: Boolean,
    default: true,
  },
  showCancle: {
    type: Boolean,
    default: true,
  },
  showConfrim: {
    type: Boolean,
    default: true,
  },
  headCss: {
    type: [String, Object],
    default: "",
  },
  confrimText: {
    type: String,
    default: "确定",
  },
});

watch(show, (val) => {
  if (!val) {
    emits("hideHandler");
  }
});

const emits = defineEmits<{
  (event: "confrim", data: void): void;
  (event: "hideHandler", data: void): void;
}>();

const confrim = () => {
  emits("confrim");
};
defineExpose({
  show,
});
</script>
<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}

.dialog-content {
  padding-top: 16px;
}
</style>
